import React, { useEffect, useState } from 'react';
import './commendproducts.css'
import icon_logo_softnaira from "@/assets/icon_logo_softnaira.png"
import icon_logo_okilo from "@/assets/icon_logo_okilo.png"
import icon_logo_lumos from "@/assets/icon_logo_lumos.png"
import { saveEvent } from '@/store/actions/saveEvent';
import { useDispatch } from 'react-redux';
import AppParams from '@/utils/appParams';
// import icon_logo_loansalad from "@/assets/icon_logo_loansalad.png"


export default function CommendProducts() {

    //推荐产品列表
    const [commendProdcuts, setCommendProdcuts] = useState([])

    //获取 Redux 分发器
    const dispatch = useDispatch()

    //监听
    useEffect(() => {
        //初始化数据
        const list = [
            // { logo: icon_logo_loansalad, name: "Loan Station", amount: "50000", days: "14", link: "" },
            { logo: icon_logo_softnaira, name: "Soft Naira", amount: "70000", days: "14", link: "https://ngapps.obs.af-south-1.myhuaweicloud.com/softnaira_wholeh5apk.apk" },
            { logo: icon_logo_okilo, name: "Okilo", amount: "80000", days: "14", link: "https://ngapps.obs.af-south-1.myhuaweicloud.com/okilo_wholeh5apk.apk" },
            { logo: icon_logo_lumos, name: "Lumos Loan", amount: "150000", days: "14", link: "https://ngapps.obs.af-south-1.myhuaweicloud.com/lumosloan_wholeh5apk.apk" },
        ]
        setCommendProdcuts(list)
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击监听
    const onHandleProductClick = (index) => {
        console.log(`======= commend product: ${index}`)
        if (commendProdcuts.length > index) {
            const item = commendProdcuts[index]

            //打点
            doHitEvent("PRODUCT_INSTALL_CLICK", item.name)

            if (item.link.startsWith("http")) {
                window.open(item.link, "_blank")
            } else {
                console.log(`======= commend product: link is not valid`)
            }
        } else {
            console.log(`======= commend product: products is empty`)
        }
    }

    return (
        <div className="commendProductsRoot">
            {commendProdcuts.map((value, index) => {
                return (
                    <div className="commendProductsItem" key={index}>
                        <img className='commendProductsItemIcon' src={value.logo} alt='' />
                        <div className='commendProductsItemDetail'>
                            <span className='commendProductsItemDetailName'>{value.name}</span>
                            <span className='commendProductsItemDetailAmountDays commendProductsMarginTop6Px'> <span className='commendProductsItemDetailTextFocus'>{value.amount}</span> NGN | <span className='commendProductsItemDetailTextFocus commendProductsMarginLeft4Px'>{value.days}</span> Days</span>
                        </div>
                        <div className='commendProductsItemButtonApply' onClick={() => { onHandleProductClick(index) }}>
                            <div className="mainButtonBlueSmallFont">Install</div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
};
